<template>
  <v-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    max-width="500px"
    @click:outside="close"
  >
    <v-card>
      <v-card-title>授权角色</v-card-title>
      <v-card-text>
        <v-tabs v-model="activeName">
          <v-tab value="1">功能菜单</v-tab>
          <v-tab value="0" v-if="isSystemUser">系统菜单</v-tab>

          <v-window v-model="activeName">
            <v-window-item value="1">
              <v-list>
                <template v-for="(item, index) in functionData" :key="item.id">
                  <v-list-item>
                    <template v-slot:prepend>
                      <v-checkbox
                        v-model="checkedKeys"
                        :value="item.id"
                        hide-details
                        density="compact"
                      ></v-checkbox>
                    </template>
                    <v-list-item-title>{{ item.name }}</v-list-item-title>
                  </v-list-item>
                  
                  <v-list v-if="item.children && item.children.length" class="pl-4">
                    <v-list-item
                      v-for="child in item.children"
                      :key="child.id"
                    >
                      <template v-slot:prepend>
                        <v-checkbox
                          v-model="checkedKeys"
                          :value="child.id"
                          hide-details
                          density="compact"
                        ></v-checkbox>
                      </template>
                      <v-list-item-title>{{ child.name }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </template>
              </v-list>
            </v-window-item>

            <v-window-item value="0" v-if="isSystemUser">
              <v-list>
                <template v-for="(item, index) in systemData" :key="item.id">
                  <v-list-item>
                    <template v-slot:prepend>
                      <v-checkbox
                        v-model="checkedKeys"
                        :value="item.id"
                        hide-details
                        density="compact"
                      ></v-checkbox>
                    </template>
                    <v-list-item-title>{{ item.name }}</v-list-item-title>
                  </v-list-item>
                  
                  <v-list v-if="item.children && item.children.length" class="pl-4">
                    <v-list-item
                      v-for="child in item.children"
                      :key="child.id"
                    >
                      <template v-slot:prepend>
                        <v-checkbox
                          v-model="checkedKeys"
                          :value="child.id"
                          hide-details
                          density="compact"
                        ></v-checkbox>
                      </template>
                      <v-list-item-title>{{ child.name }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </template>
              </v-list>
            </v-window-item>
          </v-window>
        </v-tabs>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn
          color="grey-darken-1"
          variant="text"
          @click="close"
        >
          取消
        </v-btn>
        <v-btn
          color="primary"
          @click="submit"
        >
          确定
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import { doSetRoles } from "@/api/system/user/userManagement.ts";
import { isNull } from "@/utils/validate";
import { getList } from "@/api/system/role/roleManagement.ts";

export default {
  name: "UserManagementRoles",
  data() {
    return {
      dialogFormVisible: false,
      activeName: "1",
      isSystemUser: false,
      functionData: [],
      systemData: [],
      checkedKeys: [],
      currentRow: null,
    };
  },
  methods: {
    async showRole(row, activeName) {
      this.currentRow = row;
      this.activeName = activeName;
      this.dialogFormVisible = true;
      await this.fetchData();
    },
    async fetchData() {
      const { data } = await getList({
        userId: this.currentRow.id,
        activeName: this.activeName,
      });
      if (!isNull(data)) {
        if ("1" === this.activeName) {
          this.functionData = data.tree;
          this.checkedKeys = data.checkedKeys;
        } else {
          this.systemData = data.tree;
          this.checkedKeys = data.checkedKeys;
        }
      }
    },
    close() {
      this.dialogFormVisible = false;
      this.functionData = [];
      this.systemData = [];
      this.checkedKeys = [];
    },
    async submit() {
      const { msg } = await doSetRoles({
        userId: this.currentRow.id,
        roleIds: this.checkedKeys.join(),
        activeName: this.activeName,
      });
      this.$baseMessage(msg, "success");
      this.$emit("fetchData");
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.v-card {
  .v-card-title {
    font-size: 1.25rem;
    font-weight: 500;
  }
  
  .v-card-text {
    padding-top: 16px;
  }
}

.v-tabs {
  .v-window {
    height: 400px;
    overflow-y: auto;
  }
}
</style> 